<template>
  <div>
    <table-data ref="table" :config="table_config" :searchFormConfig="search_form_config">
      <template v-slot:content >
        <div style="margin-bottom: 20px;" >
          <el-button :type="carsListBtnId == item.id ? 'danger':''" size="small" v-for="item in carsListBtn" :key="item.id" @click="getTypeList(item)" >{{item.value}}</el-button>
        </div>
      </template>
    </table-data>
    <cars-attr-dialog :flagVisible.sync="dialog_show" :data="currentItemData" />
  </div>
</template>

<script>
import { getCarsAttrs, getCarsTypeAttrs } from "@/api/carsAttr.js"
import TableData from "@c/tableData"
import CarsAttrDialog from "@c/dialog/addCarsAttr"

export default {
  name: "CarsAttr",
  components: {
    TableData,
    CarsAttrDialog
  },
  data() {
    return {
      currentItemData: {}, // 当前公用属性数据
      dialog_show: false,
      table_config: {
        checkbox: false,
        isShowSearchForm: true,
        isRequest: false,
        thead:[
          {label:"字段",prop:"key"},
          {label:"文本",prop:"value"},
        ],
        url: "carsAttrList",
        data: {
          pageSize: 10,
          pageNumber: 1
        }
      },
      table_loading: false,
      search_form_config: {
        form_item: [
          {label:"关键字",type:"Keyword",options: ["key","value"]},
        ],
        form_handler: [
          {label: "新增", prop:"add", type:"success",element:"btn",handler:()=>this.showDialog()},
        ]
      },
      form: {
        area: "",
        type: "",
        status: "",
      },
      carsListBtn: [],
      carsListBtnId: "",
      dataId: ""
    }
  },
  mounted() {
    this.firstTask();
  },
  methods: {
    search() {

    },
    showDialog() {
      if(!this.currentItemData.id) {
        return this.$message({
          message: "请选择车辆公共属性",
          type: "error"
        })
      }
      this.dialog_show = true;
    },
    // 第一次进入页面，先请求到所有的属性，再请求第一个属性的详细列表
    async firstTask() {
      const data = await this.getCarsAttrsFun();
      this.carsListBtnId = data[0].id;
      this.$refs.table.requestData({typeId: data[0].id})
    },
    getCarsAttrsFun() {
      return getCarsAttrs()
        .then((res) => {
          this.carsListBtn = res.data.data;
          return res.data.data;
        })
    },
    getTypeList(item) {
      this.carsListBtnId = item.id;
      this.currentItemData = item;
      this.$refs.table.requestData({typeId: item.id})
    }
  }
}
</script>

<style lang="scss" scoped>

</style>